
<template>
  <div>
    <el-table :data="active_component.propValue.list" style="width: 100%">
      <el-table-column prop="BtnText" label="切换按钮" >
        <template slot-scope="scope">
            <el-input v-model="scope.row.BtnText"></el-input>
        </template>
      </el-table-column>
        <el-table-column prop="title" label="按钮选中颜色">
         <template slot-scope="">
              <el-color-picker v-model="active_component.propValue.btnActiveColor" show-alpha></el-color-picker>
        </template>
        </el-table-column>
      <el-table-column prop="img" label="图片" width="180">
         <template slot-scope="scope">
            <img :src="scope.row.img" style="width:30px;" alt="">
            <el-input v-model="scope.row.img"></el-input>
            <Upload :text="'上传图片'" @confrim="(e)=>{confrim(e,scope.$index)}" :type="'primary'"></Upload>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题">
         <template slot-scope="scope">
            <el-input v-model="scope.row.title"></el-input>
        </template>
        </el-table-column>
      <el-table-column prop="btnlist" label="模板按钮组">
         <template slot-scope="scope">
            <div class="flex-wrap">
                <div v-for="(item,i) of scope.row.btnlist" :key="i">
                 <el-tag style="margin-bottom:2px;margin-right:2px;" size="mini" >{{item}}</el-tag>
                 <i class="el-icon-circle-close" @click="deletephoto(scope.row.btnlist,i)"></i>
                </div>
                <el-input v-model="scope.row.inputValue"></el-input>
               <el-button @click="addBtnitem(scope.$index)" size="mini" type="primary">新增</el-button>
            </div>
        </template>
        </el-table-column>
    </el-table>
    <div class="flex-center" style="margin-top: 10px">
      <el-button size="small" type="" @click="closeTK">取消</el-button>
      <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
 import Upload from "../Upload/index.vue";
export default {
  props: ["componentId", "componentList", "activeCompont"],
  components: { Upload },
  data() {
    return {
      name: "",
      tabIndex: 0,
      btnitem:'',
      active_component: {},
    };
  },
  created() {
    if(this.activeCompont){
        this.active_component =this.activeCompont
    }else{
        for (let key in this.componentList) {
      if (
        this.componentList[key].isDialog &&
        this.componentList[key].propValue.value == this.componentId
      ) {
        this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
      }
    }
    }

  },
  methods: {
    // 点击删除
    deletephoto(list,i) {
        list.splice(i,1)
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    addItem() {
      this.active_component.propValue.list.push({
        title:'卡片标题',icon:'',content:`卡片描述`,link:''
      });
    },
    deleteItem(i){
        this.active_component.propValue.list.splice(i,1)
    },
    addBtnitem(i){
        this.active_component.propValue.list[i].btnlist.push(this.active_component.propValue.list[i].inputValue)
    },
    confrim(e, i) {
      this.active_component.propValue.list[i].img = e;
    },
    closeTK() {
      this.$emit("closeTK");
    },
    changetab(i) {
      this.active_component.propValue.tabIndex = i;
    },
    pushcanvas() {
        if (this.activeCompont) {
        //  this.$store.commit('setComponentData',this.$store.state.componentData)
            this.$emit("closeTK"); //关闭弹框
        } else {
            let TabSwitchcardList=JSON.parse(localStorage.getItem('TabSwitchcardList'))?JSON.parse(localStorage.getItem('TabSwitchcardList')):[]
            let item={
                Tabclass:'TabSwitchcard_box'+new Date().getTime(),
                class:'TabSwitchcard_con'+new Date().getTime(),
                activeBg:this.active_component.propValue.btnActiveColor,
            }
            TabSwitchcardList.push(item)
            localStorage.setItem('TabSwitchcardList',JSON.stringify(TabSwitchcardList))

            let canvasStyle = this.$store.state.canvasStyleData;
            let component = this.active_component;
            component.style.top = Number(canvasStyle.height);
            component.style.left = 300;

            this.$store.commit("addComponent", { component: component });
            canvasStyle.height = String(
            Number(canvasStyle.height) + Number(component.style.height)
            );
            this.$store.commit("setCanvasStyle", canvasStyle);
            this.$emit("closeTK"); //关闭弹框
        }
    },
  },
};

</script>

<style>
</style>
